<template>
  <div>
    <h1>进度条示例</h1>
    <el-progress :percentage="progress" />
  </div>
  <div class="image">
    <div id="myChart" :style="{ width: '476px', height: '250px' }"></div>
  </div>
  <button @click="ReDrawLine">绘制折线图</button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from "echarts"


const progress = ref(0);

const fetchData = () => {
  setTimeout(() => {
    progress.value += 10;
    if (progress.value < 100) {
      fetchData();
    }else {

    }
  }, 1000);
};

onMounted(() => {
  fetchData();
  drawLine()
});

function ReDrawLine() {
  const myChart = echarts.init(document.getElementById('myChart'));
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };
  myChart.setOption(option);
}

function drawLine() {
  import('echarts').then((echarts) => {
    const myChart = echarts.init(document.getElementById('myChart'));
    const option = {
      title: {
        text: 111,
        left: 'center',
        top: 20,
        textStyle: {
          fontSize: 18,
        },
      },
      dataset: [
        {

          source: [
            [
              "爬取图片地址",
              "电影名字",
              "电影演员",
              "电影评分",
              "电影评论人数"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2896940977.jpg",
              "坠落 审判  /  坠楼 死亡 剖析  /  一场 坠楼 剖析",
              "2023-05-21(戛纳电影节) / 2023-08-23(法国) / 2024(中国大陆) / 桑德拉·惠勒 / 斯万·阿劳德 / 米洛·马查多·格拉纳 / 安托万·赖纳茨 / 塞缪尔·泰斯 / 珍妮·贝丝 / 莎迪娅·本太耶布 / 卡米莉·拉瑟福德 / Anne Rotger / 索菲亚·菲力瑞斯 / 梅西...",
              "8.4",
              "(44404人评价)"
            ],
            [
              "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2896065153.jpg",
              "电锯 惊魂  /  恐惧 斗室 X 港 ) /  夺魂 锯 X  ( 台",
              "2023-09-25(比利时) / 2023-09-29(美国) / 托宾·贝尔 / 肖妮·史密斯 / 西诺薇·玛考迪·伦德 / 史蒂文·布兰德 / 蕾内塔·瓦卡 / 约书亚·奧卡莫托 / 奥克塔维奥·伊诺埃萨 / 波莱特·埃尔南德斯 / 豪尔赫·布里塞诺 / 科斯塔斯·曼迪勒 / 迈克尔·比奇...",
              "7.5",
              "(37097人评价)"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2896816460.jpg",
              "风暴  /  离开  /  The   Woman       Storm",
              "2023-08-17(中国大陆) / 佟丽娅 / 吴昱翰 / 王影璐 / 张宥浩 / 黄璐 / 姜瑞霖 / 罗逸桥 / 谢欣华 / 谢春懿 / 傅迦 / 艾丽娅 / 荣梓杉 / 淳于珊珊 / 中国大陆 / 秦海燕 / 2023-07-29 14:00 / 101分钟 / 剧情 / 家庭 / 秦海燕 Haiyan Qin / 汉语普通话",
              "6.6",
              "(52769人评价)"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2894025389.jpg",
              "燃冬  /  The   Breaking   Ice  /  Un   hiver  à  Yanji",
              "2023-05-21(戛纳电影节) / 2023-08-22(中国大陆) / 周冬雨 / 刘昊然 / 屈楚萧 / 魏如光 / 刘白沙 / 中国大陆 / 陈哲艺 / 97分钟 / 剧情 / 爱情 / 陈哲艺 Anthony Chen / 汉语普通话 / 朝鲜语",
              "5.7",
              "(89243人评价)"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2893085018.jpg",
              "自由 之声",
              "2023-07-04(美国) / 吉姆·卡维泽 / 比尔·坎普 / 克里斯特尔·阿帕里西奥 / 哈维尔·戈迪诺 / 耶西卡·博罗托·佩里曼 / 曼尼·佩雷斯 / 埃杜瓦多·维拉斯蒂吉 / 古斯塔沃·桑切斯·帕拉 / 克里斯·阿韦迪西安 / 何塞·祖尼加 / 盖里·巴萨拉巴...",
              "7.8",
              "(13989人评价)"
            ],
            [
              "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2898328874.jpg",
              "芭蕾 复仇 曲  /  芭蕾舞 女  /  芭蕾舞 女演员",
              "2023-10-05(釜山国际电影节) / 2023-10-06(韩国网络) / 全钟瑞 / 金智勋 / 朴有林 / 张允柱 / 申世辉 / 金武烈 / 韩国 / 李聪贤 / 93分钟 / 芭蕾复仇曲 / 动作 / 惊悚 / 李聪贤 Choong Hyun Lee / 韩语",
              "6.9",
              "(19631人评价)"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2897460998.jpg",
              "花月 杀手  /  花开 杀手",
              "2023-05-20(戛纳国际电影节) / 2023-10-20(美国) / 莱昂纳多·迪卡普里奥 / 罗伯特·德尼罗 / 杰西·普莱蒙 / 莉莉·格莱斯顿 / 布兰登·费舍 / 坦图·卡丁诺 / 约翰·利思戈 / 卡拉·杰德·迈尔斯 / 亚内·科林斯 / 吉莉安·迪昂 / 威廉·贝勒 / 路易斯·坎瑟米...",
              "7.4",
              "(5701人评价)"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2896597470.jpg",
              "学爸  /  你好 学爸  /  Papa",
              "2023-08-18(中国大陆) / 黄渤 / 单禹豪 / 闫妮 / 张钧甯 / 张子贤 / 万茜 / 王迅 / 吴磊 / 王子铭 / 杨曼聆 / 泰勒 / 张磊 / 杨新鸣 / 王庆祥 / 傅首尔 / 倪虹洁 / 孔连顺 / 孙仲秋 / 中国大陆 / 苏亮 / 118分钟 / 剧情 / 喜剧 / 苏亮 Liang Su / 陆姝...",
              "6.1",
              "(58938人评价)"
            ],
            [
              "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2897850897.jpg",
              "无处 逢生  /  漂流 集装箱",
              "2023-09-29(西班牙网络) / 安娜·卡斯蒂罗 / 塔马·诺瓦斯 / 托尼·科尔维略 / 玛丽亚姆·托雷斯 / 伊琳娜·布拉沃 / 维多利亚·泰耶罗 / 露西娅·索莉娅 / 玛丽·鲁兹 / 厄杜·布尔尼思 / 安东尼奥·布伊尔 / 赛义德·埃尔·穆登 / 卡比尔·塞卡里...",
              "7.0",
              "(14945人评价)"
            ],
            [
              "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2897743122.jpg",
              "伸冤  /  私刑 教育 台 ) /  叛谍 裁判 终极 一战 港",
              "2023-08-31(中国台湾) / 2023-09-01(美国) / 丹泽尔·华盛顿 / 达科塔·范宁 / 欧吉尼奥·马斯特兰德雷亚 / 大卫·丹曼 / 盖亚·斯考达里奥 / 雷莫·吉罗内 / 安德烈·斯卡杜齐奥 / 安德烈埃·多德罗 / 丹尼尔·佩罗内 / 扎卡里亚·哈姆扎 / 索尼娅·阿马尔...",
              "7.2",
              "(26944人评价)"
            ]
          ]
        },
        {
          transform:{
            type:"filter",
            config:{
              dimension:0,
              "!=":null
            }
          }
        },
      ],
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        axisLabel: { interval: 0, rotate: 30 }
      },
      yAxis: {},
      series: [{
        type: 'bar',
        encode: { x: "电影名字", y: "电影评分" },
        datasetIndex: 1
      }],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
    }

    myChart.setOption(option);
  });
}




</script>

<style scoped>
/* 如果需要自定义样式，可以在这里添加样式 */
</style>
